<template>
	<transition name="move">
		<div v-show="showFlag" class="food">
			<div class="food-content">
				<div class="image-header">
					<img :src="food.image" alt=""> 
					<!-- 返回按钮 -->
					<div class="back" @click="hide">
						<i class="icon-arrow_lift"></i>
					</div>
				</div>
				<!-- 商品信息 -->
				<div class="content">
					<h1 class="title">{{food.name}}</h1>
					<div class="detail">
						<span class="sell-count">月售{{food.sellCount}}份</span>
						<span class="rating">好评率{{food.rating}}%</span>
					</div>
					<!-- 价格 -->
					<div class="price">
						<span class="now">￥{{food.price}}</span>
						<span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
					</div>
					<div class="cartcontrol-wrapper">
						<!-- <cartcontrol></cartcontrol> -->
					</div>
					<!-- 商品介绍 -->
					<div class="info" v-show="food.info">
						<h1 class="title">商品信息</h1>
						<p class="text">{{food.info}}</p>
					</div>
					<!-- 商品评价 -->
					<div class="rating">
						<h1 class="title">商品评价</h1>
						<!-- ratingselect组件 -->
						<!-- 评价列表 -->
						<div class="rating-wrapper">
							<ul v-show="food.ratings&&food.ratings.length">
								<li v-for="(rating,index) in food.ratings" :key="index" class="rating-item border-1px">
									<div class="user">
										<span class="name">{{rating.username}}</span>
										<img :src="rating.avatar" alt="user" width="12" height="12" class="avatar">
									</div>
								</li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div>
	</transition>
</template>

<script>
export default {
  props: {
    food: {
      type: Object
    }
  },
  data() {
    return {
      showFlag: false
    }
  },
  methods: {
    show() {
      this.showFlag = true
    },
    hide() {
      this.showFlag = false
    }
  }
}
</script>

<style lang="stylus">
.food
	position fixed
	left 0
	top 0
	bottom 48px // 给购物车组件留位置
	z-index 30 // 小于购物车和蒙版的层级
	width 100%
	background-color #fff
	transform translate3d(0,0,0)
	&.move-enter-active,.&.move-leave-active
		transform all 0.2s linear 
	&.move-enter-active,.&.move-leave-active
		transform translate3d(100%,0,0)
	.image-header   // 食品大图片  这里实现的效果就是图片不设定高度，即使图片加载不出来，也依然占据着固定的空间 
		position relative
		width 100%
		height 0
		padding-top 100% // 让整个div宽高相等
		img
			position absolute
			top 0
			left 0
			width 100%
			height 100%
		.back
			position absolute
			top 10px
			left 0
			.icon-arrow_lift
				display block
				padding 10px // 增加可点击区域
				font-size 20px
				color #fff
	.content
		padding 18px
		.title
			line-height 14px
			margin-bottom 8px
			font-size 14px
			font-weight 700
			color rgb(7, 17, 27)
		.detail
			margin-bottom 18px
			line-height 10px
			font-size 0
			.sell-count, .rating
				font-size 10px
				color rgb(147, 153, 159)
			.sell-count
				margin-right 12px
		.price
			font-weight 700
			line-height 24px
			.now
				margin-right 8px
				font-size 14px
				color rgb(240, 20, 20)
			.old
				text-decoration line-through
				font-size 10px
				color rgb(147, 153, 159)
</style>
